<template>
  <div ref="pageComBox" class="app-container page_wrapper">
    <div ref="otherBox">
      <QueryForm v-model="form" @search="getImportList" />
    </div>
    <!-- <ImportTable
      :list="importList"
      v-loading="loading"
      element-loading-text="加载中..."
    /> -->
    <el-table
      ref="multipleTable"
      :data="importList"
      style="width: 100%"
      :max-height="tableHeight"
      :key="tableHeight"
      v-tabscroll="$getTableHeight"
    >
      <el-table-column prop="contractCode" label="合同编号" width="120px" />
      <el-table-column prop="customerName" label="客户姓名" />
      <el-table-column prop="customerMobile" label="客户电话" width="110px" />
      <!-- <el-table-column prop="need" label="进件额度" /> -->
      <el-table-column prop="productName" label="产品" width="150px" />
      <el-table-column prop="deposit" label="在审金额" />
      <!-- <el-table-column prop="counts" label="进件数量" /> -->
      <!-- <el-table-column prop="completion" label="完成额度" /> -->
      <el-table-column prop="income" label="佣金" />
      <el-table-column prop="progress" label="进度">
        <template slot-scope="{ row }">
          <span>{{ INPUTSTATUSLIST[row.progress] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="{ row }">
          <span>{{ row.state === 1 ? "正常" : "作废" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="incomeDate" label="收款日期" width="160px" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createDate" label="创建日期" width="160px" />
      <el-table-column prop="checkBy" label="审核人" />
      <el-table-column prop="checkDate" label="审核日期" width="160px" />
      <el-table-column prop="checkBy" label="付款证明">
        <template slot-scope="{ row }">
          <!-- <el-image :src="getImages(row.certificate)" v-if="row.certificate" :preview-src-list="[row.certificate]"></el-image> -->
          <el-image
            :src="item"
            class="tab_td_img"
            v-for="(item, index) in getImages(row.certificate)"
            :key="`img_${index}`"
            :preview-src-list="[item]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="updateBy" label="修改人" />
      <el-table-column prop="updateDate" label="修改日期" width="160px" />
      <el-table-column label="操作" width="140" fixed="right" align="center">
        <template slot-scope="{ row }" v-if="row.state === 1">
          <el-button type="primary" plain size="mini" @click="editHandle(row)"
            >编辑</el-button
          >
          <el-button type="danger" plain size="mini" @click="handleDelete(row)"
            >作废</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <BasePagination
      v-model="page.page"
      :total="totalCount"
      @change="pageOnChange"
    />

    <!-- 编辑弹框 开始 -->
    <glsx-dialog :show="editInputDialog" title="编辑" @close="closeInputDialog()">
      <IntoForm ref="Form" :submit-type="2" @close="closeInputDialog" />
    </glsx-dialog>
    <!-- 编辑弹框 end -->

  </div>
</template>

<script>
import { getImportList } from "@/api/finance";
import QueryForm from "./_components/QueryForm";
import ImportTable from "./_components/ImportTable";
import { updateImport } from "@/api/finance";
import { INPUTSTATUSLIST } from "@/common/constants";
import IntoForm from "@/views/my-client/my-input/Form.vue";
export default {
  name: "ImportManage",
  components: { QueryForm, ImportTable,IntoForm },
  data() {
    return {
      form: {
        customerName: "",
        customerMobile: "",
        startDate: "",
        endDate: "",
      },
      page: {
        page: 1,
        size: 100,
      },
      totalCount: 0,
      importList: [],
      loading: false,
      INPUTSTATUSLIST,
      progressObj: {
        0: "初始",
        1: "审核中",
        2: "渠道拒绝",
        3: "客户拒绝",
        4: "已交付",
        5: "已收款",
        6: "完成",
      },
      editInputDialog: false,
      tableHeight:0
    };
  },
  created() {
    this.getImportList();
  },
  mounted() {
    // 计算表格的高度
    let _this = this;
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    async getImportList() {
      this.showAppLoading();
      const params = {
        ...this.page,
        paramObject: this.form,
      };
      this.loading = true;
      const res = await getImportList(params);
      this.hideAppLoading();
      this.loading = false;
      if (!res.result) return;
      this.importList = res.data.dataList;
      this.totalCount = res.data.totalCount;
      this.page.page = res.data.page;
    },
    pageOnChange(row) {
      this.page.page = row.page;
      if (row.pageSize) {
        this.page.size = row.pageSize;
      }
      this.getImportList();
    },

    handleDelete(row) {
      this.$confirm("此操作将合同作废, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.updateImport(row.contractId);
        })
        .catch(() => {});
    },
    async updateImport(id) {
      const res = await updateImport({ id, state: 2 });
      if (!res.result) return;
      this.$message.success("作废成功");
      this.getImportList();
    },

    // 编辑进件
    editHandle(item) {
      this.editInputDialog = true;
      this.$nextTick(() => {
        this.$refs.Form.setData(Object.assign({}, item));
      });
    },

    // 监听组件变化
    updateEvent() {
      this.editInputDialog = false;
      this.getImportList();
    },

    // 关闭弹框
    closeInputDialog() {
      this.editInputDialog = false;
    },

    getImages(str) {
      if (!str) {
        return [];
      }
      let arr = str.split(",");
      console.log(arr);
      return arr;
    },
  },
};
</script>
